import React from 'react'
import { point, ipc, role} from '@/hoc'

/** 高阶组件
 * 1. 高阶组件、高阶函数，本质上是一个纯函数
 * 2. 作用：高阶组件，也被称之为容器组件，是用来修饰、装修UI组件的
 * 3. 语法: hocFn(UIComponent) { return <NewUIComponent {...this.props}> }
 * 语法详解：高阶组件（高阶函数）接受一个 UI组件（React类） 作为入参，返回一个新的UI组件（React类）。
 * 使用原则：一个高阶组件，一般只复用一个可以复用的逻辑。
*/

// 使用@符号是一种装饰器写法
@ipc
@point
@role(['admin', 'editor', 'trader', 'boss'])
class TestHoc extends React.Component {
  render () {
    console.log( 'props', this.props )
    return (
      <div className='test-hoc'>
        <h2>测试高阶组件</h2>
      </div>
    )
  }
}

// point 是一个高阶函数，可以传递参数，传递的是一个类组件

// export default ipc(point(TestHoc, 23467890))
export default TestHoc